<template>
  <div
    class="table-select-wrap"
    @click="nameColl = !nameColl"
    ref="dropdown"
    :style="{ width }"
  >
    <div class="flex-box">
      <input
        type="text"
        v-model="ntitle"
        class="table-title input"
        @change="inputChange"
        v-if="isInput"
      />
      <span class="table-title" v-else>{{ ntitle }}</span>
      <img
        src="@/assets/imgs/electricity/close.png"
        alt="清除图标"
        v-show="ntitle"
        @click.stop="clearInput"
      />
      <!-- <img
        src="@/assets/imgs/electricity/selectj.png"
        alt="箭头"
        v-show="nameColl"
      />
      <img
        src="@/assets/imgs/electricity/selectj2.png"
        alt="箭头"
        v-show="!nameColl"
      /> -->
    </div>
    <div
      class="table-select"
      :style="{ height: nameColl ? '100px' : '0px' }"
      v-if="!isInput"
    >
      <div
        :class="['option-item', item === ntitle ? 'on' : '']"
        @click="clickItem(item)"
        v-for="(item, index) in dataList"
        :key="index"
        :title="item"
      >
        {{ item }}
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "TableSelect",
  props: {
    title: {
      type: String,
      default: "",
    },
    dataList: {
      type: Array,
      default: [],
    },
    type: {
      type: String,
      default: "1", //1名称2区域3年度
    },
    width: {
      type: String,
      default: "80px",
    },
    isInput: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      nameColl: false,
      ntitle: "",
    };
  },
  mounted() {
    this.ntitle = this.title;
    document.addEventListener("click", this.closeDropdownIfClickedOutside);
  },
  beforeDestroy() {
    document.removeEventListener("click", this.closeDropdownIfClickedOutside);
  },
  methods: {
    inputChange() {
      this.$emit("change", { name: this.ntitle, type: this.type });
    },
    clearInput() {
      this.ntitle = "";
      this.$emit("change", { name: "", type: this.type });
    },
    clickItem(item) {
      this.ntitle = item;
      this.$emit("change", { name: item, type: this.type });
    },
    closeDropdownIfClickedOutside(event) {
      if (!this.$refs.dropdown.contains(event.target)) {
        this.nameColl = false;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.table-select-wrap {
  height: 24px;
  line-height: 24px;
  background: url("@/assets/imgs/electricity/table-sbg.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
  cursor: pointer;
  padding: 0 5px 0 10px;
  box-sizing: border-box;
}
.flex-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  img {
    width: 12px;
    height: 12px;
  }
}
.table-title {
  width: 80%;
  height: 24px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  font-size: 14px;
  font-family: "苹方中等";
  color: rgba(199, 225, 255, 1);
  &.input {
    height: 24px;
    background: transparent;
    border: none;
    outline: none;
  }
}
.table-select {
  width: 100%;
  height: 140px;
  overflow: auto;
  position: absolute;
  top: 24px;
  left: 0;
  z-index: 2;
  background: url("@/assets/imgs/electricity/selectCon.png") no-repeat center;
  background-size: 100% 100%;
  text-align: left;
  box-sizing: border-box;
  transform: all 0.2s ease;
  .option-item {
    width: 78px;
    height: 22px;
    line-height: 22px;
    color: #c7e1ff;
    font-size: 14px;
    font-family: "阿里巴巴普惠体";
    display: block;
    padding: 0 0 0 10px;
    margin: 5px 0 0 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    &:hover {
      background: url("@/assets/imgs/electricity/selectOp.png") no-repeat left
        center;
    }
    &.on {
      background: url("@/assets/imgs/electricity/selectOp.png") no-repeat left
        center;
    }
  }
}
/* 针对WebKit浏览器（如Chrome、Safari） */
::-webkit-scrollbar {
  display: none;
}

/* 针对Firefox浏览器 */
* {
  scrollbar-width: none; /* 可选项：自动（auto）或无（none） */
}
</style>